<template>
  <div class="container">
    <el-container >
      <el-main class="main">
        <div class="login">
          <h1>航材保障实案管理系统</h1>
          <img src="@/../public/favicon.png" style="width: 200px"/>
          <el-form
              ref="loginForm"
              :model="loginForm"
              :rules="loginRules"
              style="width: 80%;margin-left: 20%;">
            <el-form-item prop="username">
              <el-col :span="4">
                <b style="font-size: 30px">用户名</b>
              </el-col>
              <el-col :span="12">
                <el-input
                    v-model="loginForm.username"
                    tabindex="1"
                />
              </el-col>
            </el-form-item>
            <el-form-item prop="password">
              <el-col :span="4">
                <b style="font-size: 30px">密码</b>
              </el-col>
              <el-col :span="12">
                <el-input
                    show-password
                    v-model="loginForm.password"
                    placeholder="请输入密码"
                    tabindex="2"
                    @keyup.enter.native="handleLogin"
                />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="24">
              <el-button
                  round
                  type="primary"
                  style="width: 50%;margin-top: 50px;margin-right: 20%"
                  @click.native.prevent="handleLogin"
              >登 录
              </el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import VueQr from 'vue-qr'
import {login} from "@/api/user";

export default {
  name: 'Login',
  // eslint-disable-next-line vue/no-unused-components
  components: { VueQr},
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        loginType: 0,
      },
      loginRules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码?', trigger: 'blur'}],
      },
    }
  },
  methods: {
    async handleLogin() {
      if (await this.$refs.loginForm.validate()) {
        let res = await login({username:this.loginForm.username, password:this.loginForm.password});
        if(res.state===true){
          localStorage.setItem('uid', res.message)
          localStorage.setItem('role', res.role)
          await this.$router.push('/homepage')
        }else{
          this.$message({
            message:'账号或密码错误',
            type:'error'
          })
        }
      }
    },
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital@0;1&display=swap');

.container{
  background: url(../assets/bg3.jpg);
  height: 100%;
  background-size:100% 100%;
  padding-bottom: 8%;
}

.main {
  margin-top: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

* >>> input:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset !important;
}

h1{
  font-size: 80px;
  font-family: 幼圆;
  font-weight: bold;
  color: #FFFFFF;
}

.login{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
</style>
